<template>
    <div>
      <template v-if="!formInlineShow">
        <div class="titleItem">
          <span>{{ $t('maintenance.Maintenancecontent') }}</span>
          <div class="checkObject" style="padding: 0 0">
            <div class="checkObjectItem">
              <div class="checkObjectName" :class="{ required: true }">{{ $t('maintenance.MaintenanceLevel') }}
              </div>
              <div class="checkObjectValue">
                <!--            <Select-->
                <!--                v-model="formInline.itemLevel"-->
                <!--                filterable-->
                <!--                clearable-->
                <!--                disabled-->
                <!--               :placeholder="`${$t('common.selectInfo')}`"-->
                <!--                class="select"-->
                <!--            >-->
                <!--              <Option v-for="v in levels" :value="v.value" :key="v.value">{{-->
                <!--                  v.label-->
                <!--                }}</Option>-->
                <!--            </Select>-->
                {{ formInline.itemLevel }}
              </div>
            </div>
            <div class="checkObjectItem">
              <div class="checkObjectName" :class="{ required: true }">{{ $t('maintenance.MaintenanceItem') }}
              </div>
              <div class="checkObjectValue">
                <!--            <Input class="inputWrapper" :maxlength="100" v-model="formInline.itemProject" clearable/>-->
                {{ formInline.itemProject }}
              </div>
            </div>
          </div>
          <div class="checkObject" style="padding: 0 0">
            <div class="checkObjectItem">
              <div class="checkObjectName"  :class="{ required: true }">
                {{ $t('maintenance.MaintenanceMethod') }}
              </div>
              <div class="checkObjectValue" >
                <!--            <Input class="inputWrapper" :maxlength="250" v-model="formInline.itemMethod" clearable/>-->
                {{ formInline.itemMethod }}
              </div>
            </div>

            <div class="checkObjectItem">
              <div class="checkObjectName" :class="{ required: true }">{{ $t('保养位置') }}
              </div>
              <div class="checkObjectValue">
                {{ formInline.bomOrg }}
              </div>
            </div>
          </div>
        </div>
        <div class="titleItem">
          <span>{{ $t('maintenance.Maintenancestandards') }}</span>
          <div class="checkObject">
            <div class="checkObjectItem">
              <div class="checkObjectName">{{ $t('maintenance.numberRequirements') }}</div>
              <div class="checkObjectValue">
                <!--            <InputNumber :max="9999999999999999999" class="inputNumberWrapper" v-model="formInline.minValue" clearable/>-->
                {{ formInline.minValue }}
              </div>
            </div>
            <!--                <div class="checkObjectItem">-->
            <!--                    <div class="checkObjectName">{{ $t('maintenance.UpperLimit') }}</div>-->
            <!--                    <div class="checkObjectValue">-->
            <!--                        &lt;!&ndash;            <InputNumber :max="9999999999999999999" class="inputNumberWrapper" v-model="formInline.maxValue" clearable/>&ndash;&gt;-->
            <!--                        {{ formInline.maxValue }}-->
            <!--                    </div>-->
            <!--                </div>-->
            <div class="checkObjectItem">
              <div class="checkObjectName" :class="{ required: true }">{{ $t('maintenance.workinghours') }}</div>
              <div class="checkObjectValue">
                <!--            <InputNumber class="inputNumberWrapper" :min="1" :max="9999999999999999999" v-model="formInline.itemHours" clearable/>-->
                {{ formInline.itemHours }}
              </div>
            </div>
            <div class="checkObjectItem">
              <div class="checkObjectName">{{ $t('maintenance.Maintenancestandards') }}</div>
              <div class="checkObjectValue">
                <!--            <Input class="inputWrapper" :maxlength="19" v-model="formInline.unitName" clearable/>-->
                {{ formInline.unitName }}
              </div>
            </div>
          </div>
        </div>
      </template>
        <div class="titleItem tab">
            <span>{{ $t('maintenance.usetools') }}</span>
        </div>
        <div class="tableContent">
            <Table ellipsis ref="selection"
                   :columns="toolColumns"
                   :data="planToolList">
            </Table>
        </div>

      <div class="titleItem tab">
        <span>{{$t('maintenance.Usematerial')}}</span>
      </div>
      <div class="tableContent">
        <Table ellipsis ref="selection"
               :columns="materColumns"
               :data="materData">
        </Table>
      </div>

        <!--    <div class="titleItem">-->
        <!--      <span>保养使用物料</span>-->
        <!--    </div>-->
        <!--      <div class="contentTable">-->
        <!--          <Table ref="drawerSelection" :columns="materialColumns" :data="planMaterialList"></Table>-->
        <!--      </div>-->
    </div>
</template>

<script>
export default {
    name: "contentDetail",
    props: ['formInline', 'planToolList','materData','formInlineShow'],
    data() {
        return {
          materColumns:[
            {
              type: 'index',
              width: 90,
              title: `${ this.$t('common.index') }`,
              align: 'center'
            },
            {
              title: `${ this.$t('maintenance.MaterialnoInfo') }`,
              key: 'materielNo',
              align: 'center'
            },
            // {
            //   title: `${ this.$t('maintenance.materialcode') }`,
            //   key: 'materialCode',
            //   align: 'center'
            // },
            {
              title: `${this.$t('common.GoodsName')}`,
              key: 'goodsName',
              align: 'center'
            },
            {
              title: `${this.$t('spareParts.Specification')}`,
              key: 'specification',
              align: 'center'
            },
            {
              title: `${this.$t('spareParts.quantity')}`,
              key: 'num',
              width: 170,
              align: 'center'
            },
            // {
            //   title: `${this.$t('maintenance.unitprice')}`,
            //   key: 'unitPrice',
            //   align: 'center'
            // },
          ],
            // checkContent: [
            //   { name: "点检内容", value: "主轴清洗" },
            //   { name: "点检方法", value: "主轴清洗" },
            // ],
            // checkStandard: [
            //   { name: "下限", value: "0.5" },
            //   { name: "上限", value: "1.0" },
            //   { name: "单位", value: "摄氏度" },
            // ],
            levels: [
                {value: 1, label: '一级保养'},
                {value: 2, label: '二级保养'},
                {value: 3, label: '三级保养'}
            ],
            toolColumns: [
                {
                    type: 'index',
                    width: 80,
                    title: `${this.$t('common.index')}`,
                    align: 'center'
                },
                {
                    title: `${this.$t('maintenance.ToolMaterialNo')}`,
                    key: "toolCode",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true
                },
                {
                    title: `${this.$t('maintenance.Toolnames')}`,
                    key: "toolName",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true
                },
                // { title: "规格型号", key: "toolModel",align: 'center', minWidth: 100, tooltip: true  },
                // { title: "品牌", key: "toolBrand",align: 'center', minWidth: 100, tooltip: true  },
                {
                    title: `${this.$t('保管方式')}`,
                    key: "toolMode",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true
                },
              { title: `${ this.$t('spareParts.quantity') }`, key: "toolNum",align: 'center', minWidth: 100, tooltip: true  },
            ],
            materialColumns: [
                {
                    title: `${this.$t('maintenance.materialcode')}`,
                    key: "materialCode",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true
                },
                {
                    title: `${this.$t('maintenance.materialname')}`,
                    key: "materialName",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true
                },
                {title: `${this.$t('spareParts.quantity')}`,
                  key: "num", align: 'center', minWidth: 100, tooltip: true},
                {
                    title: `${this.$t('maintenance.Unitprice')}`,
                    key: "unitPrice",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true
                },
                {
                    title: `${this.$t('maintenance.totalprice')}`,
                    key: "totalPrice",
                    align: 'center',
                    minWidth: 100,
                    tooltip: true
                },
            ],
            // toolData: this.planToolList,
            // materialData: this.planMaterialList
        };
    },
};
</script>

<style lang="scss">
.titleItem {
    position: relative;
    font-size: 18px;
    //font-weight: bold;
    padding: 10px;

    .checkObject {
        display: flex;
        flex-wrap: wrap;
        // padding: 20px;

        .checkObjectItem {
            display: flex;
            flex: 33.33%;
            flex-wrap: wrap;
            .checkObjectName {
                color: #000000 !important;
                height: 40px;
                line-height: 40px;
                width: 100%;
                border: 1px solid #eeeeee;
                background: #f5f6f7;
                text-align: left;
                padding-left: 10px;
            }

            .checkObjectValue {
                height: 40px;
                line-height: 40px;
                width: 100%;
                border: 1px solid #eeeeee;
                padding-left: 10px;
            }
        }
    }

    .checkTool {
        display: flex;
        padding: 20px;

        .checkToolItem {
            flex: 1;

            .checkObjectName {
                height: 40px;
                line-height: 40px;
                width: 100%;
                border: 1px solid #eeeeee;
                background: #f5f6f7;
                text-align: center;
            }

            .checkObjectValue {
                height: 40px;
                line-height: 40px;
                width: 100%;
                border: 1px solid #eeeeee;
                text-align: center;
            }
        }
    }

    .searchBox {
        .label {
            display: flex;
        }
    }

}

.contentTable {
    margin: 20px;
}

.titleItem::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 20px;
    top: 12px;
    left: 0px;
    background: #187bdb;
}
</style>
